.paginator
  text-align: center
  text-size('s-1')
  padding: 5rem 0
  a
    display: inline-block
  .extend
    text-decoration: none
    padding: 1.5rem 5rem
    border: 2px solid $color-black-2
    background: $color-main
  .prev, .next
    position relative
    &::before
      content: ''
      width: 1em
      height: 1em
      background-image: url(../img/icon-left-arrow.svg)
      background-position: center
      background-size: contain
      background-repeat: no-repeat
      position: absolute
      top: 50%
      left: calc(5rem - 1em)
      transform: translate(-50%, -50%)
  .next
    &::before
      left: auto
      right: calc(5rem - 1em)
      transform: translate(50%, -50%) scaleX(-1)

  .page-number
    text-size('s-3')
    // font-weight: 400
    padding: 0 0.5em

@media screen and (max-width: $S)
  .footer
    font-size: 10px;
